<template>
    <div class="main">
        <el-container style="height: 100vh">
            <el-main class="bg" style="padding: 0;overflow: inherit">
                <div class="main-warp">
                    <Voice class="main-list"></Voice>
                    <Index class="main-list"></Index>
                    <Index class="main-list"></Index>
                </div>
            </el-main>

        </el-container>
    </div>
</template>

<script setup lang="ts">
 import Index from './views/index.vue'
 import Voice from './views/Voice.vue'
 // let sliderWidth
</script>

<style scoped lang="scss">


.main {
  height: 100vh;
  width: 100vw;
  overflow: hidden;

}
.main-warp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  height: 70%;
  width: 90vw;
}
.main-list {
  box-shadow: 0 0 0 2px #ccc;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
}

.bg {
  width: calc(100vw);
  overflow-y: auto !important;
  background: var(--bg-color-dark) !important;
  display: flex;
  justify-content: center;
  //flex-direction: column;
  align-items: center;
}

</style>
